<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面全屏的实现11</title>
    <style type="text/css">
        #father:-webkit-full-screen {
            background-color: skyblue;
        }

        #father {
            margin: 0 auto;
            height: 600px;
            width: 700px;
        }

        #content {
            margin: 0 auto;
            height: 500px;
            width: 700px;
            background: #ccc;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="father">
        <button id="fullScreen">全屏展示</button>
        <button id="noFullScreen">退出全屏</button>
        <div id="content">
            <h1>页面的全屏展示和退出全屏</h1>
        </div>
    </div>
    <script>
    
        document.getElementById("fullScreen").onclick = function () {
            var ele = document.documentElement;
            var reqMethod = ele.RequestFullScreen || ele.mozRequestFullScreen || ele.webkitRequestFullScreen || ele.msRequestFullscreen;
            console.log(reqMethod);
            if (reqMethod) {
                reqMethod.call(ele);
            }
            // if (document.documentElement.RequestFullScreen) {
            //     document.documentElement.RequestFullScreen();
            // }
            // //兼容火狐
            // console.log(document.documentElement.mozRequestFullScreen)
            // if (document.documentElement.mozRequestFullScreen) {
            //     document.documentElement.mozRequestFullScreen();
            // }
            // //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
            // if (document.documentElement.webkitRequestFullScreen) {
            //     document.documentElement.webkitRequestFullScreen();
            // }
            // //兼容IE,只能写msRequestFullscreen
            // if (document.documentElement.msRequestFullscreen) {
            //     document.documentElement.msRequestFullscreen();
            // }
        }
        document.getElementById("noFullScreen").onclick = function () {
            var ele = document;
            var reqMethod = ele.exitFullScreen || ele.mozExitFullScreen || ele.webkitExitFullscreen || ele.msExitFullscreen;
            if(reqMethod){
                reqMethod.call(ele);
            }
            // if (document.exitFullScreen) {
            //     document.exitFullscreen()
            // }
            // //兼容火狐
            // console.log(document.mozExitFullScreen)
            // if (document.mozCancelFullScreen) {
            //     document.mozCancelFullScreen()
            // }
            // //兼容谷歌等
            // if (document.webkitExitFullscreen) {
            //     document.webkitExitFullscreen()
            // }
            // //兼容IE
            // if (document.msExitFullscreen) {
            //     document.msExitFullscreen()
            // }
        }

        // todo: // document与documentElement的区别展示
        function show(){
            console.log(document);
            console.log(document.documentElement);
            // open('http://www.baidu.com');
        }
        show();

    </script>
</body>

</html>